<template>
  <div>
    <!-- banner -->
    <div class="archive-banner banner">
      <h1 class="banner-title">回忆</h1>
    </div>
    <!-- 归档列表 -->
    <v-card class="blog-container">
      <v-timeline>
        <v-timeline-item v-for="(recall, i) in recallList" :key="i" :color="recall.color" small>
          <template v-slot:opposite>
            <span :class="`headline font-weight-bold ${recall.color}--text`" v-text="recall.year"></span>
          </template>
          <div class="py-4">
            <h2 :class="`headline font-weight-light mb-4 ${recall.color}--text`">{{recall.title}}</h2>
            <div>
              {{recall.content}}
            </div>
          </div>
        </v-timeline-item>
      </v-timeline>
    </v-card>
  </div>
</template>

<script>
import {list} from '../../api/recall';
export default {
  created() {
    this.getRecallList();
  },
  data: function () {
    return {
      recallList:[],
      years: [
        {
          color: 'cyan',
          year: '1960-12-12',
          title:'初恋'
        },
        {
          color: 'green',
          year: '1970-12-23',
          title:'热恋'
        },
        {
          color: 'pink',
          year: '1980-23-19',
          title:'初恋'
        },
        {
          color: 'amber',
          year: '1990-23-12',
          title:'初恋'
        },
        {
          color: 'orange',
          year: '2000-23-15',
          title:'初恋'
        },
      ],
    };
  },
  methods: {
    getRecallList(){
      list().then(res=>{
        if(res.data.code==200){
          this.recallList=res.data.data;
        }
      })
    }
  },

};
</script>

<style scoped>
.archive-banner {
  background: url(https://static.talkxj.com/wallroom-1920x1080-bg-338d7bc.jpg) center center / cover no-repeat;
  background-color: #49b1f5;
}

.time {
  font-size: 0.75rem;
  color: #555;
  margin-right: 1rem;
}
</style>
